/*!
 * Alibaba B2B Theme - Main JavaScript
 * Professional B2B theme for Halo CMS
 * 纯原生JavaScript版本，无jQuery依赖
 */

(function() {
    'use strict';

    // DOM Ready
    document.addEventListener('DOMContentLoaded', function() {
        
        // Initialize all components
        initMobileMenu();
        initDropdownMenus();
        initScrollToTop();
        initCarousel();
        
        console.log('Alibaba B2B Theme JavaScript initialized');
    });

    /**
     * Mobile Menu Toggle
     */
    function initMobileMenu() {
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const navMenu = document.querySelector('.nav-menu');
        
        if (mobileMenuBtn && navMenu) {
            mobileMenuBtn.addEventListener('click', function() {
                navMenu.classList.toggle('active');
            });
        }
    }

    /**
     * Dropdown Menus
     */
    function initDropdownMenus() {
        const dropdowns = document.querySelectorAll('.dropdown');
        
        dropdowns.forEach(dropdown => {
            const toggle = dropdown.querySelector('.dropdown-toggle');
            const menu = dropdown.querySelector('.dropdown-menu');
            
            if (toggle && menu) {
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    dropdown.classList.toggle('active');
                });
            }
        });
        
        // Close dropdowns when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.dropdown')) {
                dropdowns.forEach(dropdown => {
                    dropdown.classList.remove('active');
                });
            }
        });
    }

    /**
     * Scroll to Top Button
     */
    function initScrollToTop() {
        // Create scroll to top button
        const scrollBtn = document.createElement('button');
        scrollBtn.className = 'scroll-to-top';
        scrollBtn.setAttribute('aria-label', 'Scroll to top');
        scrollBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
        document.body.appendChild(scrollBtn);
        
        // Show/hide based on scroll position
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                scrollBtn.classList.add('visible');
            } else {
                scrollBtn.classList.remove('visible');
            }
        });
        
        // Scroll to top on click
        scrollBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }

    /**
     * 图片轮播功能
     */
    function initCarousel() {
        console.log('初始化轮播组件...');
        
        const slides = document.querySelectorAll('.carousel-slide');
        const indicators = document.querySelectorAll('.carousel-indicator');
        const prevBtn = document.querySelector('.carousel-prev');
        const nextBtn = document.querySelector('.carousel-next');
        let currentSlide = 0;
        let autoPlayInterval;

        console.log('找到的轮播元素:', {
            slides: slides.length,
            indicators: indicators.length,
            prevBtn: !!prevBtn,
            nextBtn: !!nextBtn
        });

        if (slides.length === 0) {
            console.log('没有找到轮播幻灯片，退出初始化');
            return;
        }

        // 显示指定幻灯片
        function showSlide(index) {
            console.log('切换到幻灯片:', index);
            
            // 隐藏所有幻灯片
            slides.forEach(slide => {
                slide.classList.remove('active');
                slide.style.opacity = '0';
            });
            
            // 更新指示器
            indicators.forEach(indicator => {
                indicator.classList.remove('active');
                indicator.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
            });
            
            // 显示当前幻灯片
            if (slides[index]) {
                slides[index].classList.add('active');
                slides[index].style.opacity = '1';
            }
            
            // 更新当前指示器
            if (indicators[index]) {
                indicators[index].classList.add('active');
                indicators[index].style.backgroundColor = 'rgba(255, 255, 255, 1)';
            }
            
            currentSlide = index;
        }

        // 下一张
        function nextSlide() {
            const next = (currentSlide + 1) % slides.length;
            showSlide(next);
        }

        // 上一张
        function prevSlide() {
            const prev = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(prev);
        }

        // 开始自动播放
        function startAutoPlay() {
            console.log('开始自动播放');
            autoPlayInterval = setInterval(nextSlide, 5000); // 5秒切换一次
        }

        // 停止自动播放
        function stopAutoPlay() {
            if (autoPlayInterval) {
                console.log('停止自动播放');
                clearInterval(autoPlayInterval);
                autoPlayInterval = null;
            }
        }

        // 绑定事件
        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                console.log('点击下一张按钮');
                stopAutoPlay();
                nextSlide();
                startAutoPlay();
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                console.log('点击上一张按钮');
                stopAutoPlay();
                prevSlide();
                startAutoPlay();
            });
        }

        // 指示器点击事件
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                console.log('点击指示器:', index);
                stopAutoPlay();
                showSlide(index);
                startAutoPlay();
            });
        });

        // 鼠标悬停时暂停自动播放
        const carouselContainer = document.querySelector('.carousel-container');
        if (carouselContainer) {
            carouselContainer.addEventListener('mouseenter', stopAutoPlay);
            carouselContainer.addEventListener('mouseleave', startAutoPlay);
        }

        // 初始化
        console.log('轮播组件初始化完成');
        showSlide(0);
        startAutoPlay();
    }

})();

// CSS for scroll-to-top button and other dynamic elements
const dynamicStyles = `
    .scroll-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
    }
    
    .scroll-to-top.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .scroll-to-top:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
    
    @media (max-width: 768px) {
        .scroll-to-top {
            bottom: 20px;
            right: 20px;
            width: 45px;
            height: 45px;
            font-size: 16px;
        }
    }
`;

// Inject dynamic styles
const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = dynamicStyles;
document.head.appendChild(styleSheet);